<div class="d-flex align-items-center justify-content-between">
  <div class="d-flex align-items-center justify-content-start">
    <span class="font-weight-bold text-info">
      <span *ngIf="filtered$ | async">
        {{ 'enum.FOUND' | translate }}
        {{ filteredCount }}&nbsp;/
      </span>
      <span *ngIf="!(filtered$ | async)">
        {{ 'enum.OUT_OF' | translate }}&nbsp;
      </span>
      {{ reportsCount }}
    </span>
  </div>
  <div class="d-flex align-items-center justify-content-end">
    <button *ngIf="reportsCount"
      (click)="openAdvancedFilter()"
      class="mx-2 d-flex justify-content-end align-items-center"
      mat-button>
      <i class="eos-icons">search</i>{{ 'general.ADV_FILTER' | translate }}
    </button>
    <app-quick-filter
      [gridOptions]="gridOptions"
      (filterCountChange)="filterCountChanged($event)"
      [showCount]="false"
      [condition]="isParent">
    </app-quick-filter>
  </div>
</div>
<ag-grid-angular
  (window:resize)="onResize()"
  [gridOptions]="gridOptions"
  [rowData]="riskReportsService.displayReports"
  id="risk-report-grid"
  style="width: 100%; height: calc(100vh - 280px)"
  class="ag-theme-balham">
</ag-grid-angular>
